<template>
	<view class="divBox">
		<QHzujian></QHzujian>
		<KNyue></KNyue>
		<view class="PaymentTit">待缴费项目</view>
		<view class="Payment">

			<view class="PaymentList">
				<view class="PaymentLeft">
					<text>西药费</text>
					<text class="text1">神经内科 刘美</text>
					<text class="text2">2020-06-15 11:05</text>
				</view>
				<view class="PaymentRight">
					<text class="text1">￥60.00</text>
					<text class="text2" @click="toPay">去缴费</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import QHzujian from '~@/components/feng/QHzujian/QHzujian.vue'
	import KNyue from '~@/components/feng/KNyue/KNyue.vue'
	//去缴费
	const toPay = () => {
		uni.navigateTo({
			url: '/components/feng/JFxinxi/JFxinxi'
		})
	}
</script>

<style lang="scss">
	.PaymentTit {
		margin: 30rpx 0;
		font-size: 30rpx;
	}

	.divBox {
		display: flex;
		flex-direction: column;
		margin: 0 36rpx;
		height: 1200rpx;

		.Payment {
			display: flex;
			flex-direction: column;
			// border: 1px solid red;

			.PaymentList {
				border: 1px solid #f2f2f2;
				height: 160rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.PaymentLeft {
					display: flex;
					flex-direction: column;
					margin-left: 16rpx;
					justify-content: center;

					.text1 {
						font-size: 20rpx;
						color: #adb1b8;
						margin: 10rpx 0;
					}

					.text2 {
						font-size: 20rpx;
						color: #adb1b8;
					}
				}

				.PaymentRight {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-end;
					margin-right: 16rpx;

					.text1 {
						font-size: 32rpx;
						color: #f56363;
						margin-bottom: 20rpx;
					}

					.text2 {
						display: inline-block;
						background-color: #006eff;
						color: #fff;
						width: 120rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						border-radius: 10%;
						font-size: 25rpx;
					}
				}
			}
		}

	}
</style>
